<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in iconList"
        :key="index"
        :lg="4"
        :md="4"
        :sm="4"
        :xl="4"
        :xs="12"
      >
        <el-card class="icon-panel" shadow="hover">
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            "
            @click="changeIndex(index)"
          >
            <el-badge :value="item.value">
              <vab-icon
                :icon="item.icon"
                :style="{ color: item.color, fontSize: '40px' }"
              />
            </el-badge>
            <p>{{ item.title }}</p>
          </div>
        </el-card>
      </el-col>

      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24"></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              道具管理
            </div>
          </div>
          <vab-query-form>
            <vab-query-form-left-panel :span="12"></vab-query-form-left-panel>
            <vab-query-form-right-panel :span="24">
              <el-form
                label-width="49px"
                :inline="true"
                :model="queryForm"
                @submit.native.prevent
              >
                <el-form-item label="类型">
                  <el-select v-model="queryForm.Type" placeholder="请选择">
                    <el-option
                      v-for="item in Types"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="刀径">
                  <el-select v-model="queryForm.Diameter" placeholder="请选择">
                    <el-option
                      v-for="item in Diameters"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="R角">
                  <el-select v-model="queryForm.Rangle" placeholder="请选择">
                    <el-option
                      v-for="item in Rangles"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="刃长">
                  <el-select
                    v-model="queryForm.BladeLengt"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in BladeLengths"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="材质">
                  <el-select v-model="queryForm.Material" placeholder="请选择">
                    <el-option
                      v-for="item in Materials"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="queryData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-right-panel>
          </vab-query-form>
          <el-table ref="tableSortRef" :data="list">
            <el-table-column
              v-for="(item, index) in finallyColumns"
              :key="index"
              align="center"
              :label="item.label"
              :prop="item.prop"
              :sortable="item.sortable"
              width="auto"
            >
              <template slot-scope="scope">
                <span>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-card>
      </el-col>
    </el-row>

    <table1 ref="table1" :columns="columns" :checkList="checkList" />
    <table2 ref="table2" />
    <table3 ref="table3" @fetch-data="getData" />
    <table4 ref="table4" :columns="columns" :checkList="checkList" />
    <table5 ref="table5" :columns="columns" :checkList="checkList" />
    <table6 ref="table6" :columns="columns" :checkList="checkList" />
  </div>
</template>

<script>
  import table1 from './components/table1.vue'
  import table2 from './components/table2.vue'
  import table3 from './components/table3.vue'
  import table4 from './components/table4.vue'
  import table5 from './components/table5.vue'
  import table6 from './components/table6.vue'

  import {
    AlarmKnifeInfoList,
    SerachItemList,
    KnifeInfoThresholdNewly,
    KnifeInfoThresholdList,
    KnifeNewly,
    KnifeManagerList,
    KnifeMigrate,
    KnifeLibOut,
    KnifeDiscard,
  } from '@/api/material'

  export default {
    components: {
      table1,
      table2,
      table3,
      table4,
      table5,
      table6,
    },
    data() {
      return {
        list: [],

        filterTableData: [],
        form: {},

        iconList: [
          {
            icon: 'picture-in-picture-2-line',
            title: '刀具报警',
            link: '',
            color: '#95de64',
          },
          {
            icon: 'picture-in-picture-exit-line',
            title: '设置阈值',
            link: '',
            color: '#69c0ff',
          },
          {
            icon: 'picture-in-picture-line',
            title: '入库管理',
            link: '',
            color: '#ffd666',
          },
          {
            icon: 'pixelfed-line',
            title: '刀具迁移',
            link: '/other/player',
            color: '#ffc069',
          },
          {
            icon: 'pixelfed-line',
            title: '出库管理',
            link: '/other/player',
            color: '#ffc069',
          },
          {
            icon: 'pixelfed-line',
            title: '刀具报废',
            link: '/other/player',
            color: '#ffc069',
          },
        ],
        dialogIndex: 0,

        layout: 'total, sizes, prev, pager, next, jumper',
        type: '',
        total: 0,
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          Type: '',
          Diameter: '',
          Rangle: '',
          BladeLength: '',
          Material: '',
        },
        dialogVisible: false,

        filterTableData: [],
        title: '',
        tableData: [],
        Types: [],
        BladeLengths: [],
        Diameters: [],
        Rangles: [],
        Materials: [],

        dialogVisible1: false,

        checkList: [
          '刀具编号',
          '状态',
          '类型',
          '刀径',
          'R角',
          '刃长',
          '材质',
          '物料号',
          '报警阀值',
          '位置',
          '刀具名称',
          '刀长',
          '刀柄',
        ],
        columns: [
          {
            label: '刀具编号',
            prop: 'Id',
          },
          {
            label: '状态',
            prop: 'State',
          },
          {
            label: '类型',
            prop: 'Type',
          },
          {
            label: '刀径',
            prop: 'Diameter',
          },
          {
            label: 'R角',
            prop: 'Rangle',
          },
          {
            label: '刃长',
            prop: 'BladeLength',
          },
          {
            label: '设备IP',
            prop: 'IP',
          },
          {
            label: '材质',
            prop: 'Material',
          },
          {
            label: '物料号',
            prop: 'AlarmNum',
          },
          {
            label: '报警阀值',
            prop: 'Location',
          },
          {
            label: '位置',
            prop: 'Factory',
          },
          {
            label: '刀具名称',
            prop: 'Contacts',
          },
          {
            label: '刀长',
            prop: 'ContactInformation',
          },
          {
            label: '刀柄',
            prop: 'ContactInformation',
          },
        ],
      }
    },
    computed: {
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
    },
    created() {
      SerachItemList().then((res) => {
        console.log('SerachItemListSerachItemList', res)
        this.Types = res.Types.filter((v) => v)
        this.BladeLengths = res.BladeLengths.filter((v) => v)
        this.Diameters = res.Diameters.filter((v) => v)
        this.Rangles = res.Rangles.filter((v) => v)
        this.Materials = res.Materials.filter((v) => v)
      })
      this.getData()
    },
    methods: {
      changeIndex(index) {
        this.$refs['table' + (index + 1)].show()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.getData()
      },
      queryData() {
        this.getData()
      },
      handleClose() {
        this.multipleSelection = []
        this.queryForm = {
          pageNo: 1,
          pageSize: 10,
          Type: '',
          Diameter: '',
          Rangle: '',
          BladeLength: '',
          Material: '',
        }
        this.dialogVisible = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.getData()
      },
      getData() {
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          Type: this.queryForm.Type,
          Diameter: this.queryForm.Diameter,
          Rangle: this.queryForm.Rangle,
          BladeLength: this.queryForm.BladeLength,
          Material: this.queryForm.Material,
        }
        KnifeInfoThresholdList(params).then((res) => {
          console.log('res', res)
          this.list = res.KnifeInfo
          this.total = res.TotalCount
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .access,
      .authorization,
      .version-information {
        min-height: 268px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
</style>
